<template>
    <div class="menus">
        <div class="m-top">
            <img src="static/img/crm-logo.png">
            <div class="m-t-title">首页</div>
            <div class="btn-box">
              <el-button class="m-t-btn btn" v-if="$route.path==='/menus/index'" @click="handleExit()">退出</el-button>
              <el-button class="m-t-btn btn" v-if="$route.path!=='/menus/index'" @click="goHome()">CRM首页</el-button>
<!--              <el-button class="m-t-btn btn" v-if="$route.path==='/menus/single-project' || $route.path==='/menus/group-project'" @click="goHome()">CRM首页</el-button>-->
              <el-button class="detail-btn btn" v-if="$route.path==='/menus/group-project'" @click="queryDetail()">详细查询</el-button>
<!--              <el-button class="group-btn btn" v-if="$route.path==='/menus/single-project'">团队业绩导出</el-button>-->
            </div>
        </div>
        <div class="m-left">
           <div class="m-l-box" v-for="(item,index) in leftMenus" v-if="item.meta" :key="index" @click="handleGoPage(item)" :style="{backgroundColor:item.meta.type===$route.meta.type ? '#2A4BF0' : ''}">
             <img :src="item.meta.imgUrl">
             <div class="m-l-title">{{item.meta.title}}</div>
           </div>
        </div>
        <div class="m-content">
             <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "menus",
        data(){
          return{
              leftMenus:[
                {
                  path:'/menus/single-project',
                  name:'singleProject',
                  meta:{
                    type:'single',
                    title:'单项目业绩查询',
                    imgUrl:'static/img/geren.png',
                  }
                },
                {
                  path:'/menus/group-project',
                  name:'groupProject',
                  meta:{
                    type:'group',
                    title:'团队业绩查询',
                    imgUrl:'static/img/tuandui.png',
                  }
                }
              ],
              goPathName:'',
          }
        },
        mounted() {
           console.log(this.$route)
        },
        methods:{
          handleGoPage(item){
            if(item.path!==this.$route.path){
              this.$router.push({path:item.path,query:{}})
            }
          },
          //退出登录
          handleExit(){
             this.$api.exit().then(()=>{
                localStorage.removeItem("token")
                 setTimeout(()=>{
                   this.$router.push({path:'/login',query:{}})
                 },2000)
             },(res)=>{
                this.$message.error(res.msg)
             })
          },
          queryDetail(){
             this.$router.push({path:'/menus/group-chaDetail',query:{}})
          },
          goHome(){
            this.$router.push({path:'/menus/index',query:{}})
          }
        }

    }
</script>

<style scoped lang="less">
  .menus{
    .m-top{
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 50px;
       z-index:99 ;
       img{
         position: absolute;
         width:69px;
         height: 23px;
         display: block;
         top: 50%;
         left: 65px;
         transform: translate(0,-50%);
       }
      .m-t-title{
        font-size: 15px;
        position: absolute;
        left: 220px;
        top: 22px;
        font-weight:bold;
      }
      .btn-box{
        position: absolute;
        /*height: 50px;*/
        right:45px;
        top: 50%;
        transform: translate(0,-50%);
        .btn{
          width: 100px;
          height: 30px;
          background-color:#409EFF ;
          color: #ffffff;
          padding: 0;
          line-height: 22px;
        }
        .detail-btn{
          background-color:#F9B420;
          margin-left: 20px;
        }
        .group-btn{
          background-color:#F9B420;
          margin-left: 20px;
        }
      }
    }
    .m-left{
      position: fixed;
      width:200px;
      top: 50px;
      bottom: 0px;
      background-color: #131C3D;
      padding: 24px 0 24px 0;
      .m-l-box{
        display: flex;
        height: 40px;
        padding: 0 0px 0 20px;
        box-sizing: border-box;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-top: 10px;
        margin-right: 20px;
        align-items: center;
        cursor: pointer;
        img{
          width: 20px;
          height: 20px;
          display: block;
        }
        .m-l-title{
          font-size: 14px;
          color: #ffffff;
          padding-left: 10px;
        }
      }
    }
    .m-content{
      position: absolute;
      top: 50px;
      left: 200px;
      right: 0px;
      bottom: 0px;
      background-color: #F2F7F9;
    }
  }
</style>
